<template>
  <div id="centerLeft">
    <div
      class="tag-cloud-container"
      ref="tagCloudContainer"
      @mousemove="rotateWithMouse"
    >
      <div class="tag-cloud" ref="tagCloud">
        <div
          v-for="(item, index) in dataList"
          :key="index"
          class="tag-item"
          :style="getTagStyle(index)"
          @mouseenter="hoverTag(index)"
          @mouseleave="leaveTag(index)"
          @click="getCharts(item)"
        >
          <p>{{ item }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 标签数据
      radius: 200, // 3D 半径
      angleX: Math.PI / 100, // X 轴角速度
      angleY: Math.PI / 100, // Y 轴角速度
      tags: [], // 标签 DOM 列表
      activeIndex: -1,
      rotateX: 0,
      rotateY: 0, 
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$axios.post("api/survey/popular");
        this.dataList = response.data.data.map((item) => item.name);
        this.$nextTick(() => {
          this.initTagCloud();
        });
      } catch (error) {
        console.error(error);
      }
    },

    // 生成标签云样式
    getTagStyle(index) {
      const tag = this.tags[index];
      if (tag) {
        const { x, y, z } = tag;
        const scale = (z + this.radius) / (2 * this.radius); // 根据 Z 轴调整大小
        return {
          transform: `translate3d(${x}px, ${y}px, ${z}px) scale(${scale}) rotateY(${this.rotateY}deg) `,
          opacity: scale > 0.6 ? 1 : 0.4,
          zIndex: Math.round(scale * 200),
        };
      }
      return {};
    },

    // 初始化 3D 标签云
    initTagCloud() {
      const len = this.dataList.length;
      this.tags = this.dataList.map((_, index) => {
        const phi = Math.acos(-1 + (2 * index) / len);
        const theta = Math.sqrt(len * Math.PI) * phi;

        const x = this.radius * Math.cos(theta) * Math.sin(phi);
        const y = this.radius * Math.sin(theta) * Math.sin(phi);
        const z = this.radius * Math.cos(phi);

        return { x, y, z };
      });

      requestAnimationFrame(this.animateTags);
    },

    animateTags() {
      this.rotateTags(this.angleX, this.angleY);
      requestAnimationFrame(this.animateTags);
    },

    rotateTags(angleX, angleY) {
      const cosX = Math.cos(angleX);
      const sinX = Math.sin(angleX);
      const cosY = Math.cos(angleY);
      const sinY = Math.sin(angleY);

      this.tags.forEach((tag) => {
        const y = tag.y * cosX - tag.z * sinX;
        const z = tag.y * sinX + tag.z * cosX;
        tag.y = y;
        tag.z = z;

        const x = tag.x * cosY - tag.z * sinY;
        tag.z = tag.x * sinY + tag.z * cosY;
        tag.x = x;
      });
    },

    hoverTag(index) {
      this.activeIndex = index;
    },

    leaveTag(index) {
      if (this.activeIndex === index) {
        this.activeIndex = -1;
      }
    },

    rotateWithMouse(event) {
      const halfWidth = this.$refs.tagCloudContainer.clientWidth / 2;
      const halfHeight = this.$refs.tagCloudContainer.clientHeight / 2;

      const deltaX = (event.clientX - halfWidth) / halfWidth;
      const deltaY = (event.clientY - halfHeight) / halfHeight;

      this.angleX = deltaY * 0.01;
      this.angleY = deltaX * 0.01;
    },

    getCharts(item) {
      console.log("标签点击：", item);
    },
  },
};
</script>

<style scoped>
#centerLeft {
  width: 680px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tag-cloud-container {
  position: relative;
  width: 600px;
  height: 400px;
  perspective: 1000px;
  overflow: hidden;
}

.tag-cloud {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: spin 20s infinite linear;
}

.tag-item {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
  transform-origin: 50% 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  will-change: transform;
  text-align: center;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.tag-item:hover {
  color: #ffeb3b;
  transform: scale(1.3) !important;
}

.tag-item:hover {
  z-index: 10;
  color: #ff4081;
}
</style>
